<template>
  <div
    ref="target"
    class="relative group p-0.5 rounded-xl border-white dark:border-zinc-200 duration-500 hover:bg-red-100/40"
  >
    <div>
      <!-- 搜索图标 -->
      <m-svg-icon
        class="w-1.5 h-1.5 absolute translate-y-[-50%] top-[50%] left-2"
        name="search"
        color="#707070"
      ></m-svg-icon>
      <!-- 输入框 -->
      <input
        class="w-full group-hover:bg-white dark:group-hover:bg-zinc-900 group-hover:border-zinc-200 dark:group-hover:border-zinc-700 block duration-500 h-[44px] pl-4 outline-0 text-sm bg-zinc-100 dark:bg-zinc-800 caret-zinc-200 rounded-xl text-zinc-900 dark:text-zinc-200 tracking-wide font-semibold border border-zinc-100 dark:border-zinc-700 focus:border-red-300"
        type="text"
        placeholder="搜索"
        v-model="inputValue"
        @keyup.enter="onSearchHandler"
        @focus="onFocusHandler"
        @blur="onBlurHandler"
      />
      <!-- 删除按钮 -->
      <m-svg-icon
        name="input-delete"
        v-show="inputValue"
        @click="onClearClick"
        class="w-1.5 h-1.5 duration-500 absolute right-9 translate-y-[-50%] top-[50%]"
      ></m-svg-icon>
      <!-- 分割线 -->
      <div
        class="opacity-0 h-1.5 w-[1px] absolute translate-y-[-50%] right-[62px] top-[50%] group-hover:opacity-100 duration-500 bg-zinc-200"
      ></div>
      <!-- tudo 搜索按钮 (通用组件)-->
      <m-button
        class="absolute opacity-0 duration-500 translate-y-[-50%] top-[50%] right-1 rounded-full group-hover:opacity-100"
        icon="search"
        iconColor="#ffffff"
        @click="onSearchHandler"
      ></m-button>
    </div>
    <!-- 下拉区 -->
    <transition name="slider">
      <div
        v-if="$slots.dropdown"
        v-show="isFocus"
        class="max-h-[368px] w-full text-base overflow-auto dark:bg-zinc-800 bg-white absolute z-20 left-0 top-[55px] p-2 rounded border dark:border-zinc-600 border-zinc-600 duration-200 hover:shadow-2xl scrollbar-thin scrollbar-thumb-transparent xl:scrollbar-thumb-zinc-200 xl:dark:scrollbar-thumb-zinc-900 scrollbar-track-transparent"
      >
        <slot name="dropdown"></slot>
      </div>
    </transition>
  </div>
</template>
<script>
// 双向绑定
const EMIT_UPDATE_MODELVALUE = 'update:modelValue'
// 搜索
const EMIT_SEARCH = 'search'
// 清空搜索内容
const EMIT_CLEAR = 'clear'
// 获取焦点
const EMIT_FOCUS = 'focus'
// 失去焦点
const EMIT_BLUR = 'blur'
// 输入事件
const EMIT_INPUT = 'input'
</script>
<script setup>
import { ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
import { useVModel } from '@vueuse/core'
// onClickOutside 方法是vue内置的一个指定区域外的点击事件
import { onClickOutside } from '@vueuse/core'
/**
 * 1.输入内容双向绑定
 * 2.搜索按钮在hover时展示
 * 3.一键清空文本功能
 * 4.触发搜索
 * 5.控制下拉展示区的展示
 * 6.事件处理
 */
const emits = defineEmits([
  EMIT_UPDATE_MODELVALUE,
  EMIT_SEARCH,
  EMIT_CLEAR,
  EMIT_FOCUS,
  EMIT_BLUR,
  EMIT_INPUT
])
const props = defineProps({
  modelValue: {
    type: String,
    required: true
  }
})

const inputValue = useVModel(props)

// 监听inputValue 改变触发输入事件
watch(inputValue, (val) => {
  emits(EMIT_INPUT, val)
})

// 清空搜索内容
const onClearClick = () => {
  inputValue.value = ''
  emits(EMIT_CLEAR, '')
}
// 搜索
const onSearchHandler = () => {
  emits(EMIT_SEARCH, inputValue.value)
  isFocus.value = false
}
// 获取焦点
const isFocus = ref(false)
const onFocusHandler = () => {
  isFocus.value = true
  emits(EMIT_FOCUS)
}

// 失去焦点
const onBlurHandler = () => {
  emits(EMIT_BLUR)
}

// 输入框区域外点击
const target = ref(null)
onClickOutside(target, () => {
  isFocus.value = false
})

// 暴露出isFocus属性
defineExpose({
  isFocus
})
</script>
<style lang="scss" scoped>
.slide-enter-active,
.slicer-leave-active {
  transition: all 0.3s;
}
.slider-enter-from,
.slider-leave-to {
  transform: translateY(40px);
}
</style>
